<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu>a {
            display: inline-block;
            width: 100px;
            text-align: center;
            padding: 10px;
            text-decoration: none;
        }
        
        #menu>a.active {
            border-bottom: 2px solid pink;
            color: pink;
        }
        
        #content>div {
            display: none;
        }
        
        #content>div:first-child {
            display: block;
        }
    </style>
    <!-- 使用jq之前需要先引入该文件，才能使用里面的方法 -->
    <script src="jquery-3.6.0.min.js"></script>

    <script>
        // 页面加载完成后执行
        $(function() {
            // 通过选择器加属性来获取到元素  on(事件，处理(一般使用函数))   change 事件    
            $("select[name='size']").on("change", function() {
                // 取到用户选择的值   $(this)当前元素
                var size = $(this).val();
                //选中demo修改字体样式
                $("#demo").css("font-size", size + "px");
            })
            $("select[name='color']").on("change", function() {
                    // 取到用户选择的值
                    var color = $(this).val();
                    //选中demo修改颜色样式
                    $("#demo").css("color", color);
                })
                // .css()设置多个值，传入一个对象
            $("#demo").css({
                "color": "pink",
                "font-size": "40px"
            })
        })
    </script>
</head>

<body>
    <select name="size">
        <option value="12">12px</option>
        <option value="24">24px</option>
        <option value="36">36px</option>
    </select>
    <select name="color">
        <option value="pink">pink</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
    </select>
    <div id="demo">hello</div>
    <div id="menu">
        <a href="#">栏目1</a>
        <a href="#">栏目2</a>
        <a href="#">栏目3</a>
    </div>
    <div id="content">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
    <script>
        $(function() {
            // onclick
            $("#menu>a").on("click", function() {

                // $("#menu>a").removeClass("active");
                // addClass 添加类名
                // $(this).addClass("active");
                // removeClass 添加类名
                // $(this).remove("active");
                // siblings()同级其他元素
                $(this).addClass("active").siblings().removeClass("active")
                    //得到当前元素在所有元素中的位置
                let index = $(this).index();
                //eq()选择指定位置的元素  show()显示   hide()隐藏
                $("#content>div").eq(index).show().siblings().hide();
            })
        })
    </script>
</body>

</html>